<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="renderer" content="webkit">
		<title>menu</title>
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<script src="js/jquery-1.11.3.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<link rel="stylesheet" href="css/style.css">
		<script>
			$(function() {
				$('.menu-title').click(function() {
					var $ul = $(this).next('ul');
					$('dd').find('ul').slideUp();
					if ($ul.is(':visible')) {
						$(this).next('ul').slideUp();
					} else {
						$(this).next('ul').slideDown();
					}
				});
				$('.menu-tree a').click(function() {
					var url = $(this).attr('href');
					$('.content').load(url);
					return false;
				});
			})
		</script>
	</head>

	<body class="menu">
		<div class="menu-header">菜单导航</div>
		<dl class="menu-tree">
			<dd>
				<div class="menu-title">
					<span class="glyphicon glyphicon-home" aria-hidden="true"></span> 父菜单1
				</div>
				<ul>
					<li><a target="rightFrame">子菜单1</a></li>
					<li><a target="rightFrame">子菜单2</a></li>
					<li><a target="rightFrame">子菜单3</a></li>
				</ul>
			</dd>
			<dd>
				<div class="menu-title">
					<span class="glyphicon glyphicon-search" aria-hidden="true"></span> 父菜单2
				</div>
				<ul>
					<li><a target="rightFrame">子菜单1</a></li>
					<li><a target="rightFrame">子菜单2</a></li>
					<li><a target="rightFrame">子菜单3</a></li>
					<li><a target="rightFrame">子菜单4</a></li>
					<li><a target="rightFrame">子菜单5</a></li>
				</ul>
			</dd>
			<dd>
				<div class="menu-title">
					<span class="glyphicon glyphicon-tags" aria-hidden="true"></span> 父菜单3
				</div>
				<ul>
					<li><a target="rightFrame">子菜单1</a></li>
					<li><a target="rightFrame">子菜单2</a></li>
				</ul>
			</dd>
		</dl>
	</body>

</html>